<template>
	<view class="">	
		<view class="nav-back">
			<top-heigth :backTitle="backTitle"></top-heigth>
		</view>

		<uv-popup ref="popup" @change="change">
			<view class="kong-list" v-if="list.length == 0">
				暂时没有可以投诉的订单
			</view>
			<view class="content-box" style="margin: 40rpx 0; height: 60vh; overflow-y: scroll;" v-if="list.length != 0">
				<!-- ------------------------------- -->
				<view v-for="(item,index) in list" @click="choosOrder(index)">
					<view class="complaint-top">
						<view class="complaint-top-img">
							<view class="img"><image :src="item.tAppStaffVo.staffCover"  mode="widthFix"></image></view>
							<view>技师：{{item.tAppStaffVo.staffName}}</view>
						</view>
						<view class="complaint-top-r">订单号：{{item.orderCode}}</view>
					</view>
					<view class="goods-box">
						<view class="goods" style="border-bottom: 0;">
							<view class="img-box">
								<image class="img" :src="item.tAppServiceVo.serviceImage"  mode="widthFix"></image>
							</view>
							<view class="goods-font">
								<view class="start-top">
									<h1 class="goods-h1 start-h1">{{item.tAppServiceVo.serviceName}}</h1>
								</view>
								<view class="sale">预约时间：{{item.serviceReservedTime}}</view>
								
							</view>
						</view>
						<view class="money-box">
							金额：
							<view class="red">
								<span class="goods-span-red">¥</span>{{item.orderAmount}}
							</view>
							
						</view>
					</view>
				</view>
				
				<!-- ------------------------------- -->
			</view>
		</uv-popup>
		<view class="content-box ">
			<view class="public-box m-t24">
				
				<view class="complaint">
					<view class="list border-b" @click="lookMore()">
						<view class="list-l">选择投诉订单</view>
						<view class="list-r">
							<image class="go" src="/static/image/more.png"></image>
						</view>
					</view>
					<view v-if="chooseOrderNum != null">
						<view class="complaint-order border-b">
						<view class="complaint-top">
							<view class="complaint-top-img">
								<view class="img"><image :src="list[chooseOrderNum].tAppStaffVo.staffCover" mode="widthFix"></image></view>
								<view>技师：{{list[chooseOrderNum].tAppStaffVo.staffName}}</view>
							</view>
							<view class="complaint-top-r">订单号：{{list[chooseOrderNum].orderCode}}</view>
						</view>
						<view class="goods-box">
							<view class="goods" style="border-bottom: 0;">
								<view class="img-box">
									<image class="img" :src="list[chooseOrderNum].tAppServiceVo.serviceImage"  mode="widthFix"></image>
								</view>
								<view class="goods-font">
									<view class="start-top">
										<h1 class="goods-h1 start-h1">{{list[chooseOrderNum].tAppServiceVo.serviceName}}</h1>
									</view>
									<view class="sale">预约时间：{{list[chooseOrderNum].serviceReservedTime}}</view>
									
								</view>
							</view>
							<view class="money-box">
								金额：
								<view class="red">
									<span class="goods-span-red">¥</span>{{list[chooseOrderNum].orderAmount}}
								</view>
								
							</view>
							</view>
						</view>
					</view>
					
					
					<view class="list">
						<view class="list-l">投诉建议内容</view>
					</view>
					<uv-textarea v-model="value" placeholder="请描述投诉/建议内容" style="background-color: #F8F8F8;border: none;"></uv-textarea>
				</view>
				<view class="login-but m-t80" @click="upComplaint(chooseOrderNum)">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	
	export default {
		data() {
			return {
				backTitle:"投诉建议",
				list:[],
				userInfo: uni.getStorageSync('userInfo'),
				value:'',
				chooseOrderNum:null,
			}
		},
		components: { TopHeigth },
		onLoad() {
			this.getOrder([0, 1, 2, 3, 4, 5, 6, 7, 8])
		},
		methods: {
			//提交投诉
			upComplaint(num){
				if(!this.value){
					uni.showToast({
						title:"缺少建议内容",
						icon: "none"
					})
					return;
				}
				if(num === null){
					uni.showToast({
						title:"请选择订单",
						icon: "none"
					})
					return;
				}
				uni.$u.http.post('/api/shop/v1_0/tAppComplaintRCA/insertTAppComplaint',{
						orderId:this.list[num].id,
						staffid:this.list[num].tAppStaffVo.id,
						supplierId:this.list[num].tAppSupplierVo.id,
						complaintContent:this.value,
				}).then((res) => {
					
					if(res.code == 200){
						this.chooseOrderNum=null
						this.value = ''
					}
					uni.showToast({
						icon: "none",
						title: res.message
					})
				}) 
			},
			//选择的订单
			choosOrder(item){
				this.chooseOrderNum = item
				this.$refs.popup.close();
				console.log(item)
				console.log('---------------')
			},
			// 列表
			getOrder(type) {
				uni.$u.http.post('/api/shop/v1_0/tAppOrderRCA/queryTAppOrder',{
						userId:this.userInfo.id,
						statusArray:type, // 已完成
				}).then((res) => {
					this.list = res.aaData
				}) 
			},
			lookMore(){
				this.$refs.popup.open('bottom');
			},
			change(e){
				console.log('弹窗状态改变1：',e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/common/css/public.scss";
	
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	
	.complaint{
		.list{
			@include flex;
			align-items: center;
			justify-content:space-between;
			padding:28rpx 0;
			.go{
				width: 32rpx;
				height: 32rpx;
			}
			.list-l{
				@include flex;
				align-items: center;
				justify-content:flex-start;
				font-size: 30rpx;
				.icon{
					width: 40rpx;
					height: 40rpx;
				}
				span{
					margin-left: 16rpx;
				}
				
			}
		}
	}
	
	
	.money-box{
		@include flex;
		align-items: end;
		justify-content:flex-start;
		padding: 0rpx 0 40rpx 0;
		font-size: 24rpx;
		.red{
			color: #F82727;
			font-size: 34rpx;
			font-weight: bold;
			margin-right: 16rpx;
			span{
				font-size: 26rpx;
			}
		}
	}
	
	.complaint-top{
		@include flex;
		align-items: center;
		justify-content:space-between;
		padding-top: 24rpx;
		.complaint-top-img{
			@include flex;
			align-items: center;
			justify-content:flex-start;
			font-size: 26rpx;
			.img{
				border-radius: 40rpx;
				overflow: hidden;
				font-weight: bold;
				color: #333;
				margin-right: 16rpx;
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
			
		}
		.complaint-top-r{
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.kong-list{
		padding: 100rpx 30rpx;
		text-align: center;
	}
</style>
